<template>
  <div class="monitor_page">
    <!-- 绘图部分 -->
    <div class="tabBox">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label=" 总绘图" name="testAll">
          <el-card class="card_echarts" shadow="hover">
            <echarts-seven-compose
              ref="testAll"
              type="testAll"
            ></echarts-seven-compose>
          </el-card>
        </el-tab-pane>
        <el-tab-pane :name="item.text" :label="item.name" v-for="(item) in tabPanes" :key="item.text">
          <el-card class="card_echarts" shadow="hover">
            <echarts-seven-compose :ref="item.text" :type="item.text" :key="item.text">
            </echarts-seven-compose>
          </el-card>
        </el-tab-pane>
        <el-tab-pane label="数据表格" name="table">
          <el-card class="card_echarts" shadow="hover">
            <table-all ref="tableAll"></table-all>
          </el-card
          >
        </el-tab-pane>
      </el-tabs>
    </div>
    <x-loading v-show="isLoading"></x-loading>

  </div>
</template>

<script>
  import EchartsSevenCompose from "../../monitor-echarts/app/echarts-7-app";
  import {searchRecord} from "@/services/model/appList";
  import XLoading from '@/components/animation/x-loading.vue'
  import TableAll from '../../monitor-echarts/tablesAll'

  const Base64 = require('js-base64').Base64

  export default {
    components: {EchartsSevenCompose, XLoading,TableAll},
    data() {
      return {
        tabPanes:[],
        tabsName:[],
        isLoading: false,
        activeName: "testAll",
        // 当前的图表钩子
        chartsName: ['echartsChange'],
      };
    },
    methods: {
      //tab 切换进行echart随着窗口改变方法，让数据重新渲染，
      handleClick(tab, event) {
        this.isTestAll = tab.index
        this.chartsName.map((name, index) => {
          this.$nextTick(() => {
            if (index === 0) {
              this.$refs.testAll.echartResize()
            } else {
              this.$refs[name][0].echartResize();
            }

          });
        });
      },
      // 数据刷新
      async showDialog(token, pointName) {
        this.isLoading = true
        const {data} = await searchRecord({
          token
        });
        if(this.$refs.tableAll){
          this.$nextTick(()=>{
            this.$refs.tableAll.upDateTable(data,7)
          })
        }
        let sersorNames = data.paintList
        sersorNames.forEach((item) => {
          this.tabsName.push(item.sensorName)
        })
        this.tabsName.splice(0, 1)
        this.chartsName = ['testAll']
        //遍历出tabs
        this.tabPanes = []
        let item = data.paintList
        for (let j = 1; j < item.length; j++) {
          this.tabPanes.push({
            name: item[j].sensorName,
            text: 'text' + j
          })
          this.chartsName.push(
            'text' + j
          )
        }
        this.$nextTick(() => {
          this.$refs.testAll.updateEchart(data.paintList, pointName, data.createTime, '基准点', 0)
          for (let i = 1; i < this.chartsName.length; i++) {
            let a = this.chartsName[i]
            if (this.$refs[a][0]) {
              this.$refs[a][0].updateEchart(data.paintList, pointName, data.createTime, a, i)

            }
          }
        });
        this.isLoading = false
      },
    },
    mounted() {
      //http://192.168.41.117:8081/7Mini?token=eyJwb2ludElkIjoiMTQ1ODcwNTA3OTEwNDMwMzEwNSIsInN0YXJ0Q3JlYXRlVGltZSI6MTYzNjAxMzc0OTAwMCwiZW5kQ3JlYXRlVGltZSI6MTYzNjYxODU0OTAwMCwibW9uaXRvclR5cGUiOjd9&pointName=静力水准1
      let str = decodeURIComponent(this.$route.fullPath)
      let strs = str.slice(6)
      let a = strs.split("&")
      let token
      let pointName
      for (let i = 0; i < a.length; i++) {
        token = a[0].slice(7)
        pointName = a[1].slice(10)
      }
      this.showDialog(token, pointName)
    },
  };
</script>

<style scoped="scoped" lang="less">
  @import url("../commom.less");

  .monitor_page {
    width: 100vw;
    height: 100vh;

  }

  .tabsBoxs {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }

  // 还需自定义的css
  .card_echarts {
    width: 100vw;
    height: 80vh;
    /*transform: rotate(90deg);*/
  }

  .tabBox {
    width: 100vw;
    height: 100vh;


  }

</style>
